<template>
  <a-modal
    :open="visible"
    title="技师详情"
    width="600px"
    @cancel="handleCancel"
    :footer="null"
  >
    <div v-if="technician" class="technician-detail">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h4>基本信息</h4>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="技师编号">{{
            technician.id
          }}</a-descriptions-item>
          <a-descriptions-item label="姓名">{{
            technician.name
          }}</a-descriptions-item>
          <a-descriptions-item label="性别">{{
            technician.gender === 'male' ? '男' : '女'
          }}</a-descriptions-item>
          <a-descriptions-item label="手机号">{{
            technician.phone
          }}</a-descriptions-item>
          <a-descriptions-item label="邮箱">{{
            technician.email || '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="入职时间">{{
            technician.hireDate
          }}</a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 工作信息 -->
      <div class="detail-section">
        <h4>工作信息</h4>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="部门">{{
            technician.department
          }}</a-descriptions-item>
          <a-descriptions-item label="职位">{{
            technician.position
          }}</a-descriptions-item>
          <a-descriptions-item label="技能等级">
            <a-tag :color="getLevelColor(technician.level)">{{
              technician.level
            }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag :color="getStatusColor(technician.status)">{{
              getStatusText(technician.status)
            }}</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 技能专长 -->
      <div class="detail-section">
        <h4>技能专长</h4>
        <div class="skills-list">
          <a-tag v-for="skill in technician.skills" :key="skill" color="blue">
            {{ skill }}
          </a-tag>
        </div>
      </div>

      <!-- 绩效信息 -->
      <div class="detail-section">
        <h4>绩效信息</h4>
        <a-row :gutter="16">
          <a-col :span="8">
            <div class="performance-card">
              <div class="performance-value">
                {{ technician.performance.score }}
              </div>
              <div class="performance-label">评分</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="performance-card">
              <div class="performance-value">
                {{ technician.performance.services }}
              </div>
              <div class="performance-label">服务次数</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="performance-card">
              <div class="performance-value">
                {{ technician.performance.income }}
              </div>
              <div class="performance-label">收入(元)</div>
            </div>
          </a-col>
        </a-row>
      </div>

      <!-- 排班信息 -->
      <div class="detail-section">
        <h4>排班信息</h4>
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="工作日期">
            <a-tag
              v-for="day in technician.schedule.workDays"
              :key="day"
              color="green"
            >
              {{ day }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="工作时间">{{
            technician.schedule.workTime
          }}</a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 备注信息 -->
      <div v-if="technician.notes" class="detail-section">
        <h4>备注信息</h4>
        <div class="notes-content">{{ technician.notes }}</div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
interface Technician {
  id: string;
  name: string;
  avatar?: string;
  gender: 'male' | 'female';
  phone: string;
  email?: string;
  department: string;
  position: string;
  level: '初级' | '中级' | '高级' | '专家';
  status: 'active' | 'inactive' | 'training';
  hireDate: string;
  skills: string[];
  performance: {
    score: number;
    services: number;
    income: number;
  };
  schedule: {
    workDays: string[];
    workTime: string;
  };
  notes?: string;
}

interface Props {
  visible: boolean;
  technician?: Technician | null;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    active: 'green',
    inactive: 'red',
    training: 'orange',
  };
  return colorMap[status] || 'default';
};

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    active: '在职',
    inactive: '离职',
    training: '培训中',
  };
  return textMap[status] || status;
};

const getLevelColor = (level: string) => {
  const colorMap: Record<string, string> = {
    初级: 'blue',
    中级: 'green',
    高级: 'orange',
    专家: 'purple',
  };
  return colorMap[level] || 'default';
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.technician-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.performance-card {
  padding: 16px;
  text-align: center;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.performance-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: #1890ff;
}

.performance-label {
  margin-top: 4px;
  font-size: 12px;
  color: #8c8c8c;
}

.notes-content {
  padding: 12px;
  line-height: 1.6;
  color: #595959;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}
</style>
